<template>
    <div class="app-container" v-loading="loading">
        <h2 style="display: flex">我的待办任务</h2>
        <!-- 条件查询 -->
        <el-form :inline="true" :model="query" size="mini" style="display: flex">
            <el-form-item label="任务名称:">
                <el-input v-model.trim="query.taskName" ></el-input>
            </el-form-item>
            <el-form-item>
                <el-button icon="el-icon-search" type="primary" @click="queryData">查询</el-button>
                <el-button icon="el-icon-refresh"  @click="reload">重置</el-button>
            </el-form-item>
        </el-form>

        <!-- stripe 带斑马纹 -->
        <el-table :data="list" stripe border style="width: 100%">
            <el-table-column align="center" type="index" label="序号" width="50"></el-table-column>
            <el-table-column align="center" prop="taskName" label="任务名称" min-width="160"></el-table-column>
            <el-table-column align="center" label="所属流程" min-width="120">
              <template slot-scope="{row}">
                {{`${row.processName} - v${row.version}`}}
              </template>
            </el-table-column>
            <el-table-column  align="center" prop="proposer" label="流程发起人" width="180" ></el-table-column>
            <el-table-column  align="center" prop="processStatus" label="流程状态" width="90" ></el-table-column>
            <el-table-column  align="center" prop="taskCreateTime" label="任务开始日期" width="180"></el-table-column>
            <el-table-column  align="center" label="操作" fixed="right" width="260">
                <template slot-scope="{row}">
                    <!-- 没有办理人则要先签收 -->
                    <el-popconfirm v-if="!row.taskAssignee" title="确定签收该任务吗?" @confirm="clickClaim(row.taskId)">
                        <el-button slot="reference" type="text">签收 &nbsp;</el-button>
                    </el-popconfirm>
                    <!--通过-->
                    <el-button v-else type="text" @click="clickComplete(row)">通过</el-button>
                    &nbsp;
                    <!--驳回-->
                    <el-popconfirm v-if="row.taskAssignee" title="确定驳回该申请吗？" @confirm="clickBack(row)">
                        <el-button slot="reference" type="text">驳回</el-button>
                    </el-popconfirm>
                    &nbsp;
                    <!--转办-->
                    <el-button v-if="row.taskAssignee" type="text" @click="clickTurn(row)">转办</el-button>
                    &nbsp;
                    <!--审批历史-->
                    <el-button type="text" @click="clickProcessHistory(row)">审批历史</el-button>

                    <!--业务信息详情-->
                    <el-button type="text" @click="clickDetails(row)">详情</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页组件 -->
         <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page.current"
            :page-sizes="[10, 20, 50]"
            :page-size="page.size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page.total">
        </el-pagination>

        <!-- 通过 -->
        <verify ref="verifyRef" :taskId="row.taskId"></verify>

        <!-- 转办 -->
        <turn ref="turnRef" :taskId="row.taskId"></turn>

        <!-- 驳回 -->
        <back ref="backRef" :task="row"></back>

        <!-- 审批历史 -->
        <history ref="historyRef" :businessKey="row.businessKey" :processInstanceId="row.processInstanceId" ></history>

        <el-dialog title="业务详情" :visible.sync="visibleDetails" width="600px" destroy-on-close @close="closeDialog">
            <el-input type="textarea" v-model="details" maxlength="900"  placeholder="业务详情" :autosize="{ minRows: 4}" show-word-limit></el-input>
        </el-dialog>

    </div>
</template>
<script>

import Verify from '@/views/user/workflow/apply/components/Verify'
import Turn from '@/views/user/workflow/apply/components/Turn'
import Back from '@/views/user/workflow/apply/components/Back'
import History from '@/views/user/workflow/apply/components/History'

export default {
    name: 'Await', // 和对应路由表中配置的name值一致

    components: {Verify,Turn,Back,History},

    data() {
        return {
            visibleDetails: false,
            details: '',
            list: [
                {
                    "taskId":"62509",
                    "taskName":"总经理审批",
                    "processName":"请假",
                    "version":3,
                    "proposer":"小梦",
                    "processStatus": "已暂停",
                    "taskCreateTime":"2020-01-24 17:07:16",
                    "updateDate":"2021-04-15 15:37:36"
                },
                {
                "taskId":"60011",
                "taskName":"人事审批",
                "processName":"休假",
                "version": 3,
                "proposer":"小学",
                "processStatus": "已启动",
                "taskCreateTime":"2020-12-24 11:07:10",
                "updateDate":"2021-08-15 15:30:36"
                },
            ],
            loading: false,
            page: {
                current: 1,
                size: 20,
                total: 0
            },
            query: {}, // 查询条件
            row: {}, //点击的行数据
            processInstanceId: null,
        }
    },

    created() {
        this.fetchData()
    },

    methods: {
        // 关闭
        closeDialog() {
            this.details = '';
            this.visibleDetails = false
        },
        // 分页条件查询文章列表
        async fetchData() {
            let vm = this;
            this.axios({
                url: '/myapi/task/list/wait',
                method: 'post',
                data: {
                    "current": vm.page.current,
                    "size": vm.page.size,
                    "taskName": vm.query.taskName
                }
            }).then(function (response) {
                if(response.data.code===200){
                    console.log(response.data);
                    vm.list = response.data.data.data.records;
                    vm.page.total = response.data.data.data.total;
                }
            });
        },

        // 当每页显示多少条改变后触发
        handleSizeChange(val) {
            this.page.size = val
            this.fetchData()
        },
        // 切换页码触发
        handleCurrentChange(val) {
            this.page.current = val
            this.fetchData()
        },

        // 条件查询方法
        queryData() {
            this.page.current = 1
            this.fetchData()
        },

        // 刷新重置
        reload() {
            this.query = {}
            this.fetchData()
        },

        // 点击通过
        clickComplete(row) {
            if (this.checkProcessTask(row)) {
                this.$refs.verifyRef.visible = true
            }
        },

        // 点击转办
        clickTurn(row) {
            if (this.checkProcessTask(row)) {
                this.$refs.turnRef.visible = true
            }
        },

        // 驳回
        clickBack(row) {
            let vm = this;
            this.axios({
                url: '/myapi/instance/'+row.processInstanceId,
                method: 'delete'
            }).then(function (response) {
                if(response.data.code===200){
                    vm.$message.success("驳回成功");
                    vm.fetchData();
                }
            });
/*            if (this.checkProcessTask(row)) {
                this.$refs.backRef.visible = true
            }*/
        },

        // 校验流程是否已启动
        checkProcessTask(row) {
            if(row.processStatus == '已启动') {
                this.row = row
                return true
            }
            this.$message.warning(`【${row.processName}】流程已暂停，启动流程后才可操作！`)
            return false
        },

        // 点击审批进度
        clickProcessHistory(row) {
            this.row = row
            this.$refs.historyRef.visible = true
        },

        // 点击详情
        clickDetails(row) {
            let vm = this;
            this.loading = true
            try {
                this.loading = false
                this.axios({
                    url: '/myapi/task/details',
                    method: 'post',
                    params: {
                        businessKey: row.businessKey,
                        processDefinitionId: row.processDefinitionId
                    }
                }).then(function (response) {
                    if(response.data.code===200){
                        // 刷新数据
                        vm.details = JSON.stringify(response.data.data);
                        vm.visibleDetails = true;
                        vm.fetchData();
                        console.log(response.data);
                    }
                });
            } catch (error) {
                this.loading = false
            }
        },

        // 点击签收
       async clickClaim(taskId) {
            let vm = this;
           this.loading = true
           try {
                this.loading = false
               this.axios({
                   url: '/myapi/task/claim',
                   method: 'post',
                   params: {
                       taskId: taskId
                   }
               }).then(function (response) {
                   if(response.data.code===200){
                       // 刷新数据
                       vm.fetchData();
                       vm.$message.success('签收成功');
                   }
               });
           } catch (error) {
               this.loading = false
           }
        },


    }
}
</script>
